<template>
  <div class="counter-warp">
    <p>Vuex counter：{{ count }}</p>
    <p>
      <button @click="increment">+</button>
      <button @click="decrement">-</button>
    </p>

    <a href="/pages/index/main" class="home">去往首页</a>
    <div class="test">
      <div class="t-1"></div>
    </div>
  </div>
</template>

<script>
  // Use Vuex
  import store from './store'

  export default {
    computed: {
      count() {
        return store.state.count
      }
    },
    methods: {
      increment() {
        store.commit('increment')
      },
      decrement() {
        store.commit('decrement')
      }
    }
  }

</script>
<style>
  .counter-warp {
    text-align: center;
    margin-top: 100px;
  }

  .home {
    display: inline-block;
    margin: 100px auto;
    padding: 5px 10px;
    color: blue;
    border: 1px solid blue;
  }
  .test {
    width: 200px;
    height: 20px;
    border: 1px solid #9b9b9b;
    border-radius: 200px;
    overflow: hidden;
    zoom: 1;
  }
  .test > .t-1 {
    width: 20%;
    height: 100%;
    background-color: yellow;
  }

</style>
